const {merge} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const baseConfig = require('./webpack.base.conf');

const cssUse = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        // 配置要使用的插件
        plugins: [
          'postcss-preset-env'
        ]
      }
    }
  }
]

const prodConfig = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssUse
      },
      {
        test: /\.less$/,
        use: [
          ...cssUse,
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ],
  mode: 'production'
});

module.exports = prodConfig;
